<!-- 实体店，主播，品类主播，好货快快抢 搜索 -->
<template>
	<!-- :style="{background: isSearch ? '#f7f7f7' : '#fafafa'}" -->
	<view class="app-layout" style="background-color: #F7F7F7;">
		<app-layout>
			<view class="search">
				<view class="top">
					<view class="dir-left-nowrap box">
						<input type="text" class="box-grow-1 input" confirm-type="搜索" @input="input" @confirm="search"
							v-model="keyword" placeholder="搜实体店/主播/子品牌">
						<view class="close-tip" @click="clear">
							<image class="search-close" v-if="keyword" src="/static/image/icon/delete-yuan.png"></image>
						</view>
						<view class="box-grow-0 cross-center" @click="search">搜索</view>
					</view>
				</view>
				<!-- hidden -->
				<view style="height: 104rpx"></view>

				<!-- 2021.9.27 9.28 保持一直固定在搜索框下 -->
				<view class="" v-show="!isSearch">
					<!-- 历史搜索 -->
					<view class="history">
						<view class="dir-left-nowrap cross-center title">
							<view class="box-grow-1">历史搜索</view>
							<image src="/static/image/icon/delete.png" class="box-grow-0" @click="deleteHistory">
							</image>
						</view>
						<view class="dir-left-wrap list" v-if="historyList.length > 0">
							<view class="dir-left-wrap box-grow-1">
								<block v-for="(item, index) in historyList" :key="index">
									<view class="box-grow-0 cross-center item once-item"
										@click="historyClick(item.keyword)">
										<view class="t-omit" style="max-width: 650rpx">{{item.keyword}}</view>
									</view>
								</block>
							</view>
						</view>
					</view>
					<view style="background-color: #f7f7f7">
						<u-indexware :value="navs"></u-indexware>
					</view>
				</view>
				<view v-if="isSearch" class="goods-list">
					<template v-if="list.length <= 0">
						<view class="main-center no-result">
							<view class="dir-left-nowrap cross-center">
								<image class="box-grow-0 empty" src="../../static/image/icon/empty.png"></image>
								<view class="box-grow-1">
									<view>没有找到实体店/主播/子品牌</view>
									<view v-if="!mch_id" class="text">为您推荐以下实体店/主播/子品牌</view>
								</view>
							</view>
						</view>
					</template>
					<view style="background-color: #f7f7f7">
						<u-indexware :value="newList"></u-indexware>
					</view>
				</view>
				<view class="u-loading-list" v-if="loading">加载中...</view>
			</view>
		</app-layout>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import uIndexware from '../../components/page-component/u-goods-list/u-indexware.vue';
	let page = 1;
	let is_loading = false;
	let is_no_more = false;
	let beginAfter = true;

	export default {
		name: "search",
		components: {
			uIndexware
		},
		data() {
			return {
				zhilive: 0,
				catid: 1, //实体店或主播
				keyword: '',
				isSearch: false,
				historyList: [],
				tempList: [],
				realHistoryList: [],

				list: [],
				recommend_list: [],
				sup_status: 1,
				pagecount: 1,
				loading: false,
				navs: [],
				goodsReset: false,
			};
		},
		computed: {
			...mapGetters('mallConfig', {
				getTheme: 'getTheme',
				getSetting: 'getSetting',
			}),
			newList() {
				if (this.list.length > 0) {
					return this.list;
				} else {
					return this.navs;
				}
			},
		},
		onLoad() {
			this.keyword = ''
			this.allReq(252)
			page = 1;
			is_loading = false;
			is_no_more = false;
			this.historyList = this.getHistory();
		},
		onReady() {
			if (this.keyword != '') {
				uni.setNavigationBarTitle({
					title: this.keyword
				})
			}
		},
		onReachBottom() {
			if (is_no_more) {

			} else {
				if (page < this.pagecount) {
					page++
					this.loading = true;
					this.loadenList();
				}
			}
		},
		watch: {
			keyword: {
				handler(v) {
					if (v == '') {
						this.cancel();
					}
				},
				immediate: true,
			}
		},
		methods: {
			allReq(pid) {
				this.$request({
					url: this.$api.navs.list,
					data: {
						pid: pid,
						status: 1,
						limit: 200
					}
				}).then((res) => {
					if (res.code == 0) {
						this.navs = res.data.list
					}
				}).catch(() => {

				})
			},
			goodsNav(url) {
				uni.navigateTo({
					url: url
				});
			},
			// 9.28 删除为空时
			input(e) {
				if (e.detail.value == '') {
					this.reset();
				}
			},
			search() {
				let keyword = this.keyword;
				this.keyword = keyword.trim();
				if (this.keyword === '') {
					uni.showToast({
						title: '请输入您想搜索的内容',
						icon: 'none'
					})
					return;
				}
				// this.isSearch = true
				// 历史记录
				this.setHistory();
				// 搜索结果
				this.reset();
			},
			reset() {
				page = 1;
				is_no_more = false;
				this.goodsReset = true;
				this.loadenList();
			},
			clear() {
				uni.hideKeyboard()
				this.keyword = '';
				this.loading = false;
				this.isSearch = false;
				page = 1
				this.list = []
				this.recommend_list = []
				// 9.28 清空时搜索默认主题
				// this.reset()
			},
			cancel() {
				this.isSearch = false;
				this.loading = false;
				this.keyword = '';
				this.list = [];
			},
			loadenList() {
				if (!this.keyword) return;
				if (is_loading) return;
				is_loading = true;
				let pdata = {
					limit: 10,
					page: page,
					formdata: {
						catid: "[1, 2, 3]"
					},
					keyword: this.keyword
				}
				this.$request({
					url: this.$api.entity.list,
					data: pdata
				}).then((res) => {
					is_loading = false;
					this.isSearch = true;
					this.loading = false;
					this.pagecount = res.data.pagination.page_count
					this.list = this.list.concat(res.data.list)
					this.list.forEach(item => {
						item.url = '/pages/entity/index?mall_id=' + item.id
						if (item.malloption.option1.cateinfo.length > 0) {
							item.icon_url = item.malloption.option1.cateinfo[0].icon_url
							// item.params.describe = item.malloption.option1.cateinfo[0].params.describe
							// item.params.content = item.malloption.option1.cateinfo[0].params.content
						} else {
							item.icon_url = ''
						}
					})
					if (this.list.length == 0) {
						is_no_more = true;
						page = 1
						// this.allReq(252)
					}
				}).catch(err => {
					is_loading = false;
				})
			},
			// 历史记录
			setHistory() {
				let historyList = this.getHistory();
				let keyword = this.keyword.trim();

				historyList.forEach((item, index) => {
					if (item.keyword === keyword) historyList.splice(index, 1);
				});
				historyList.unshift({
					keyword: keyword,
				});
				if (historyList.length > 20) historyList.pop();
				this.historyList = historyList;
				uni.setStorageSync("HISTORY_STORE_ZHU_LIST", historyList);
			},
			getHistory() {
				let historyList = uni.getStorageSync('HISTORY_STORE_ZHU_LIST');
				if (!historyList) historyList = [];
				return historyList;
			},
			deleteHistory() {
				let self = this;
				uni.showModal({
					content: '确认删除全部历史记录？',
					success: function(res) {
						if (res.confirm) {
							uni.removeStorageSync("HISTORY_STORE_ZHU_LIST");
							self.historyList = [];
						}
					}
				});
			},
			historyClick(keyword) {
				this.keyword = keyword.trim();
				this.reset();
			},
		}
	}
</script>

<style scoped lang="scss">
	.threefix {
		// position: fixed;
		// top: 0;
		position: sticky;
		top: 104rpx;
		width: 100%;
		background-color: #FFFFFF;
		left: 0;
		z-index: 999;
	}

	.flex {
		// position: fixed;
		// top: 102rpx;
		// left: 0;
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 24rpx 0;
		height: 120rpx;
		background-color: #FFFFFF;
		z-index: 666;

		.item {
			width: 200rpx;
			height: 72rpx;
			line-height: 72rpx;
			position: relative;
			text-align: center;
			font-size: 28rpx;

			&.active:before {
				position: absolute;
				bottom: 0;
				left: 0;
				content: '';
				font-weight: 500;
				background: #9a5e3b;
				border-radius: 4rpx;
				width: 100rpx;
				left: 50%;
				transform: translateX(-50%);
				height: 8rpx;
			}
		}
	}

	.opacity-hide {
		position: fixed;
		top: 0;
		z-index: -10;
		opacity: 0;
		overflow: hidden;
	}

	.search {
		background-color: #efeff4;
	}

	.close-pic {
		margin-right: #{20rpx};
		margin-bottom: #{16rpx};
		border-radius: 50%;

		image {
			height: #{60rpx};
			width: #{60rpx};
			display: block;
		}
	}

	.hot-center {
		background-color: #fafafa;
		padding: #{32rpx} #{24rpx};

		.top-image {
			width: #{159rpx};
			height: #{25rpx};
			display: block;
		}

		.top-list {
			border-radius: #{16rpx};
			padding: #{32rpx - 10rpx} 0;
			box-shadow: 0 0 #{12rpx} 0 #e0e0e0;

			.item {
				height: #{110rpx};

				.first {
					width: #{120rpx};
					font-weight: bold;

					image {
						width: #{48rpx};
						height: #{43rpx};
						display: block;
					}

					view {
						color: #999999;
						font-size: #{26rpx};
					}
				}

				.goods-image {
					margin-left: 32rpx;

					image {
						height: #{90rpx};
						width: #{90rpx};
						display: block;
						border-radius: #{8rpx};
					}
				}

				.goods-name {
					color: #333333;
					font-size: #{26rpx};
					margin: 0 #{24rpx};
				}
			}
		}
	}

	.app-layout {
		min-height: 100vh;
	}

	.top {
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 15;
		padding: #{20rpx} #{24rpx};
		background-color: #efeff4;
		font-size: $uni-font-size-import-two;
		color: $uni-general-color-one;

		.input {
			background-color: #ffffff;
			border-radius: #{50rpx 0 0 50rpx};
			padding: 0 #{32rpx};
			font-size: $uni-font-size-general-one;
			height: #{64rpx};
		}

		.box {
			position: relative;
			font-size: 28rpx;

			.close-tip {
				width: #{64rpx};
				height: #{64rpx};
				background-color: #ffffff;
				border-radius: #{0 50rpx 50rpx 0};
				margin-right: #{20rpx};
			}

			.search-close {
				width: #{32rpx};
				height: #{32rpx};
				border-radius: 50%;
				margin: #{16rpx};
			}
		}

		.radio {
			margin-top: #{32rpx};

			.radio-item {
				padding-bottom: #{12rpx};
			}

			.active {
				border-bottom: #{4rpx} solid;
			}
		}
	}

	.history {
		padding: #{36rpx} #{24rpx};
		border-radius: 16rpx 16rpx 0 0;
		background-color: #ffffff;
		font-size: $uni-font-size-general-one;
		border-bottom: 1rpx solid #e0e0e0;

		.title {
			padding-bottom: #{24rpx};
			color: $uni-general-color-one;

			image {
				width: #{28rpx};
				height: #{34rpx};
				display: block;
			}
		}

		.list {
			.item {
				height: #{64rpx};
				// background-color: #f7f7f7;
				padding: 0 #{20rpx};
				margin-right: #{20rpx};
				margin-bottom: #{16rpx};
				border-radius: #{32rpx};
			}
		}
	}

	.goods-list {
		background-color: #f7f7f7;

		.no-result {
			height: #{156rpx};
			padding: #{28rpx} 0;
			font-size: $uni-font-size-general-one;
			background-color: #ffffff;

			.text {
				color: $uni-general-color-two;
			}

			.empty {
				width: #{100rpx};
				height: #{100rpx};
				display: block;
				margin-right: #{40rpx};
			}
		}
	}

	.record {
		width: 100%;
		background-color: #FFFFFF;
		height: 20rpx;
		line-height: 20rpx;
		font-size: $uni-font-size-general-one;
		color: $uni-general-color-two;
		text-align: center;
	}

	.no-result {
		height: #{156rpx};
		padding: #{28rpx} 0;
		font-size: $uni-font-size-general-one;
		background-color: #ffffff;

		.text {
			color: $uni-general-color-two;
		}

		.empty {
			width: #{100rpx};
			height: #{100rpx};
			display: block;
			margin-right: #{40rpx};
		}
	}

	.u-loading-list {
		height: 64upx;
		line-height: 64upx;
		text-align: center;
		color: #b0b0b0;
		font-size: 24upx;
		// background-color: #f7f7f7;
	}

	.beturnstore {
		background: #FFFFFF;
		width: 686rpx;
		height: 128rpx;
		border-radius: 16rpx;
		margin: 20rpx auto;
		color: #333333;
		display: flex;
		align-items: center;
		padding: 0 48rpx;
		box-shadow: 0px 5rpx 10rpx rgba(57, 57, 57, 0.1);
	}

	.beturnimage {
		width: 84rpx;
		height: 84rpx;
		border-radius: 50%;
	}

	.beturnimage .image {
		width: 84rpx;
		height: 84rpx;
		border-radius: 50%;
	}

	.beturntext {
		font-size: 28rpx;
		color: #333333;
		padding-left: 32rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>
